import {
    IconLanguage,
    IconMoonFill,
} from '@arco-design/web-react/icon';
import './style/navbar.less'
import { Avatar, Space } from '@arco-design/web-react';
import { IconUser } from '@arco-design/web-react/icon';
import { Tooltip, Select } from '@arco-design/web-react';
import IconButton from "./IconButton";
import { useContext } from 'react';
import { GlobalContext } from '../context';
// import userGlobalStore,{ GlobalState } from '../store/globalStore';

export default function Navbar() {
    const {theme,setTheme} = useContext(GlobalContext)
    return (
        <div className="navbar">
            <div className="left">
                <div className="logo">
                    <img
                        src="/public/print.png"
                        alt="logo"
                    />
                    <div className={'logo-name'}>印染工业能耗管理系统</div>
                </div>
            </div>
            <div className="right">
                <ul>
                    <Space size={'medium'}>
                        <li>
                            <Tooltip content="light">
                                <IconButton
                                    onClick={()=>setTheme(theme === 'light' ? 'dark' : 'light')}
                                    icon={<IconMoonFill />}
                                />
                            </Tooltip>
                        </li>
                        <li>
                            <Select
                                triggerElement={<IconButton
                                    icon={<IconLanguage />}
                                />}
                                options={[
                                    { label: '中文', value: 'zh-CN' },
                                    { label: 'English', value: 'en-US' },
                                ]}
                                trigger="hover"
                                triggerProps={{
                                    autoAlignPopupWidth: false,
                                    autoAlignPopupMinWidth: true,
                                    position: 'br',
                                }}
                            />
                        </li>
                        <li>
                            <Avatar size={32} style={{ backgroundColor: '#3370ff' }}>
                                <IconUser />
                            </Avatar>
                        </li>
                    </Space>
                </ul>
            </div>
        </div>
    )
}